<template>
  <view :class="theme">
    <view class="h-230 relative z-1" style="margin: 20rpx 20rpx 0;">
      <uv-image width="100%" height="100%" src="/static/img/teams/1.png" />
      <view class="absolute inset-30 flex-row items-center">
        <uv-avatar size="90" :src="include(teamData.avatar)" />
        <view class="ml-24 flex-1 overflow-hidden">
          <text class="text-30 fw-bold ellipsis">{{ teamData.nickname || "-" }}</text>
          <text class="mt-12 color-placeholder">{{ teamData.level_name || "-" }}</text>
        </view>
      </view>
    </view>

    <view class="h-230 relative" style="margin: -4rpx 66rpx 30rpx;">
      <uv-image width="100%" height="100%" src="/static/img/teams/2.png" />
      <view class="absolute inset-30 flex-row flex-wrap items-center justify-between fw-bold">
        <view class="w-33% items-center">
          <view class="relative w-120 h-120 items-center justify-center">
            <uv-image width="100%" height="100%" src="/static/img/teams/3.png" />
            <text class="absolute text-22">{{ teamData.total_number || 0 }}</text>
          </view>
          <text class="mt-18">好友总人数</text>
        </view>
        <view class="w-33% items-center">
          <view class="relative w-120 h-120 items-center justify-center">
            <uv-image width="100%" height="100%" src="/static/img/teams/3.png" />
            <text class="absolute text-22">{{ teamData.team_active || 0 }}</text>
          </view>
          <text class="mt-18">总战斗力</text>
        </view>
        <view class="w-33% items-center">
          <view class="relative w-120 h-120 items-center justify-center">
            <uv-image width="100%" height="100%" src="/static/img/teams/3.png" />
            <text class="absolute text-22">{{ teamData.small_active || 0 }}</text>
          </view>
          <text class="mt-18">小区战斗力</text>
        </view>
      </view>
    </view>

    <view class="ml-30 mr-30 mb-30 bg-section b-rounded-16" style="padding: 50rpx 18rpx;">
      <view class="flex-row items-center">
        <text class="text-28 fw-bold w-150 mr-20 text-center">好友总激活</text>

        <view class="flex-1 h-36 b-rounded-10 bg-base relative">
          <text class="absolute inset-0 text-center fw-bold">{{ teamData.total_number_real || 0 }}</text>
          <view class="h-full b-rounded-10"
            :style="{ background: `linear-gradient(100deg, #372284, #81eaf0)`, transition: `all 0.3s linear`, width: `${100}%` }" />
        </view>
      </view>
      <view class="mt-40 flex-row items-center">
        <text class="text-28 fw-bold w-150 mr-20 text-center">直推人数</text>
        <view class="flex-1 h-36 b-rounded-10 bg-base relative">
          <text class="absolute inset-0 text-center fw-bold">{{ teamData.direct_number || 0 }}</text>
          <view class="h-full b-rounded-10"
            :style="{ background: `linear-gradient(100deg, #372284, #81eaf0)`, transition: `all 0.3s linear`, width: `${100}%` }" />
        </view>
      </view>
      <view class="mt-40 flex-row items-center">
        <text class="text-28 fw-bold w-150 mr-20 text-center">直推激活</text>
        <view class="flex-1 h-36 b-rounded-10 bg-base relative">
          <text class="absolute inset-0 text-center fw-bold">{{ teamData.total_number_effective || 0 }}</text>
          <view class="h-full b-rounded-10"
            :style="{ background: `linear-gradient(100deg, #372284, #81eaf0)`, transition: `all 0.3s linear`, width: `${100}%` }" />
        </view>
      </view>
    </view>

    <view v-if="teamData.pid_info" class="bg-section b-rounded-20 ml-30 mr-30 p-40">
      <text class="text-30 fw-bold">邀请人</text>
      <view class="mt-30 flex-row items-center">
        <view class="relative">
          <uv-avatar size="90" :src="include(teamData.pid_info.avatar)" />
          <label v-if="teamData.pid_info.level_name"
            class="absolute bottom-0 text-20 justify-center w-full b-rounded-16 fw-700 lh-36"
            style="text-shadow: 1rpx 0 2rpx #eee; font-style: italic; background-color: rgba(92, 51, 201, 0.6); backdrop-filter: blur(30rpx);">
            {{ teamData.pid_info.level_name }}
          </label>
        </view>
        <view class="ml-24">
          <text class="text-30 fw-bold">{{ teamData.pid_info.nickname || "-" }}</text>
          <text class="mt-12 color-placeholder">{{ teamData.pid_info.mobile || "-" }}</text>
        </view>
      </view>
    </view>

    <view class="self-center m-50">
      <uv-image width="210" height="60" src="/static/img/teams/4.png" mode="aspectFit" />
    </view>

    <view class="ml-30 mr-30">
      <input v-model="users.search" @confirm="search" :placeholder="`\ue67e 输入手机号或ID`" confirm-type="search"
        class="bg-section h-70 mb-30 text-center color-base b-rounded-20 text-26 fw-500" type="text"
        placeholder-class="iconfont color-placeholder fw-400">

      <view v-for="(user, index) in users.list" :index="index"
        class="relative mb-30 bg-section b-rounded-20 p-40 flex-row">
        <label
          :class="[['bg-inverse color-stress', 'bg-main color-primary'][user.is_active], 'absolute top-0 right-0 justify-center w-100 h-40 fw-600']"
          style="border-radius: 0 16rpx;">
          {{ ["未", "已"][user.is_active] }}激活
        </label>

        <view class="relative self-start">
          <uv-avatar size="90" :src="include(user.avatar)" />
          <label v-if="user.level_name" class="absolute top-90 text-18 justify-center w-full b-rounded-20 fw-700 lh-36"
            style="text-shadow: 1rpx 0 2rpx #eee; font-style: italic; background-color: rgba(92, 51, 201, 0.6); backdrop-filter: blur(30rpx);">
            {{ user.level_name }}
          </label>
        </view>

        <view class="ml-20">
          <view @click="uniNavigator({ url: `/pages/client/base/subordinate?id=${user.id}` })"
            class="flex-row items-center">
            <view class="flex-1">
              <text class="text-30">{{ user.nickname || "-" }}</text>
              <text class="mt-24 text-22">{{ user.mobile || "-" }}</text>
            </view>

            <uv-icon size="30" color="#8777e1" bold name="arrow-right" />
          </view>

          <view class="mt-24 flex-row flex-wrap ">
            <label class="w-50% lh-60">
              <text class="color-placeholder">战斗力：</text>
              <text class="color-label">{{ user.team_active || 0 }}</text>
            </label>
            <label class="w-50% lh-60">
              <text class="color-placeholder">好友人数：</text>
              <text class="color-label">{{ user.total_number || 0 }}</text>
            </label>
            <label class="w-50% lh-60">
              <text class="color-placeholder">直推激活：</text>
              <text class="color-label"> {{ user.direct_number || 0 }}</text>
            </label>
            <label class="w-50% lh-60">
              <text class="color-placeholder">好友激活：</text>
              <text class="color-label"> {{ user.total_number_real || 0 }}</text>
            </label>
          </view>
        </view>

      </view>

      <view class="m-30 items-center z-9">
        <uv-image v-if="!users.list.length" :showLoading="false" width="396" height="256" class="mt-60 mb-30"
          src="/static/img/blank.png" mode="aspectFit" />
        <uv-load-more :status="users.cache.status" :is-dot="!!users.list.length" icon-color="#999" color="#999" />
      </view>
    </view>

  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { pager, uniNavigator } from "@/common/libs/utils";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { ref, reactive } from "vue";

const { theme } = useMapState(["theme"]);
const { $config = {} } = getApp().globalData || {};

const teamData = ref({} as AnyObject);
const users = reactive({
  list: [] as any[],
  page: 0,
  limit: 20,
  search: "",
  cache: {
    page: 1,
    list: [] as any[],
    status: "loadmore"
  },
  next: false,
});

onLoad(() => {
  uni.request({
    url: "/teamData",
    success({ data }: any) {
      teamData.value = data || {};
      search();
    }
  });
});

onReachBottom(() => getUsers());

const search = () => {
  users.page = 0;
  users.next = false;
  users.cache = {
    page: 1,
    list: [] as any[],
    status: "loadmore"
  };
  getUsers();
}

const getUsers = () => {
  pager({ url: "/directList", data: { query: users.search } }, users);
}

</script>

<style lang="scss" scoped>
// scss
</style>